<template>
  <div class="generalizeBusiness">
    <van-nav-bar title="推广的商户" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="tip">
      <div class="left"><span>共有{{form.number}}个成员</span></div>
    </div>
    <div class="main">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false"
                   @bottom-status-change="handleBottomChange" @top-status-change="handleTopChange"
                   :bottom-all-loaded="allLoaded" ref="loadmore">
        <div class="li" v-for="(item,index) in list" :key="index">
          <div class="left">
            <!--<img src="@/assets/logo.png" alt="">-->
            <div class="info">
              <span>{{item.nick_name}}</span>
              <span>注册时间：{{item.create_time}}</span>
            </div>
          </div>
        </div>
        <div class="loadShow" v-show="allLoaded">暂无更多！</div>
        <div slot="bottom" class="mint-loadmore-bottom" v-show="!allLoaded&&topStatus!=='loading'">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加载</span>
          <span v-show="bottomStatus === 'loading'">加载中</span>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator, Loadmore} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        allLoaded: false,
        page_count: 10,
        page_index: 1,
        form: {},
        list: [],
        bottomStatus: '',
        topStatus: '',
      }
    },
    computed: {},
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      /*
    * 上拉加载
    * */
      loadBottom() {
        this.page_index++;
        this.loadData();
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.page_count = 10;
        this.page_index = 1;
        this.list = [];
        this.allLoaded = false;
        this.loadData();
      },
      //返回
      onClickLeft() {
        this.$router.go(-1)
      },
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId),
          page_count: this.page_count,
          page_index: this.page_index,
        };
        Indicator.open('加载中...');
        this.$axios.userGenMerchant(params).then(res => {
          Indicator.close();
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.form = res.data;
          res.data.list.forEach(item => {
            this.list.push(item);
          });
          if (res.data.list.length < this.page_count) {
            this.allLoaded = true;// 若数据已全部获取完毕
          }
        })
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .generalizeBusiness {
    width: 100%;
    height: 100%;
    background: white;
    /*下拉刷新*/

    .van-pull-refresh, .van-pull-refresh__track {
      height: calc(100% - 46px - 0.7rem);
    }

    .tip {
      width: 100%;
      height: 0.7rem;
      background: rgba(250, 250, 250, 1);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left {
        font-size: 0.24rem;
        color: #999999;
        margin-left: 0.36rem;
      }

      .right {
        margin-right: 0.24rem;

        input[type='button'] {
          width: 1.2rem;
          height: 0.36rem;
          background: linear-gradient(45deg, #fdb405, #fdcc4a);
          border-radius: 0.1rem;
          font-size: 0.2rem;
          border: 0;
          color: white;
        }
      }
    }

    .main {
      width: 100%;
      height: calc(100% - 0.7rem - 46px);
      overflow: auto;
      padding-left: 0.37rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        height: 1.36rem;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .left {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          img {
            width: 0.84rem;
            height: 0.84rem;
            border-radius: 50%;
            display: block;
            margin-left: 0.12rem;
            margin-right: 0.32rem;
          }

          .info {
            height: 0.9rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 0.24rem;
            color: #333333;

            span:first-child {
              font-size: 0.3rem;
            }

            span:last-child {
              color: #999999;
            }
          }
        }

        .right {
          color: #999999;
          font-size: 0.2rem;
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: .10rem;
            height: 0.2rem;
            margin-left: 0.07rem;
            margin-right: 0.4rem;
          }
        }
      }
    }
  }
</style>
